<template>
  <div>
    <div class="detail_box" v-loading="loading">
      <p class="text_tip">提示：密码最大长度为16位</p>
      <div class="line" >
        <span class="lab"><i class="mark_icon">*</i>旧密码：</span>
        <div>
          <el-input type="password" placeholder="请输入旧密码" v-model="oldPwd" :maxlength="16" @input="tip=''"></el-input>
        </div>
      </div>
      <div class="line" >
        <span class="lab"><i class="mark_icon">*</i>新密码：</span>
        <div>
          <el-input type="password" placeholder="请输入新密码" v-model="newPwd" :maxlength="16" @input="tip=''"></el-input>
        </div>
      </div>
      <div class="line" >
        <span class="lab"><i class="mark_icon">*</i>确认密码：</span>
        <div>
          <el-input type="password" placeholder="请输入确认密码" v-model="confirmPwd" :maxlength="16" @input="tip=''"></el-input>
        </div>
      </div>
      <p class="error_line">{{tip}}</p>
      <span class="confirm_btn" @click="confirmEdit">确定</span>
    </div>
  </div>
</template>

<script>

import {clearData,updatePwd} from "@/api/sys/user";
export default {
  data () {
    return {
      newPwd:'',
      oldPwd:'',
      confirmPwd:'',
      loading:false,
      tip:''
    }
  },
  mounted() {
  },
  methods:{
    confirmEdit(){
      let that = this;
      if (that.oldPwd===''){
        that.tip = '请输入旧密码';
      }else if (that.newPwd===''){
        that.tip = '请输入新密码';
      }else if (that.confirmPwd===''){
        that.tip = '请输入确认密码';
      }else if (that.confirmPwd!==that.newPwd){
        that.tip = '确认密码与新密码不一致';
      }else {
        that.loading = true;
        let params = new URLSearchParams();
        params.append('newPassword',that.newPwd);
        params.append('password',that.oldPwd);
        updatePwd(params, 'application/x-www-form-urlencoded').then(response => {
          that.$alert('修改成功,请重新登录', '提示', {
            showClose: false,
            confirmButtonText: '确定',
            callback: action => {
              that.dropOut();
            }
          });
          that.loading = false;
        }).catch((e) => {
          that.loading = false;
        });
      }
    },

    dropOut(){
      let that = this;
      clearData().then(response => {
        localStorage.clear();
        that.$router.push('/')
      }).catch((e) => {});
    }
  }
}
</script>

<style scoped>
.confirm_btn{
  display: block;
  margin:30px 0 0 136px;
  width: 330px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  background: #6687f9;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}

.confirm_btn:hover{
  background: #6687f9;
}

.text_tip {
  padding-left: 50px;
  color: #6687f9;
  font-size: 14px;
  margin-bottom: 30px;
}

.error_line {
  line-height: 24px;
  height: 24px;
}
</style>
